18.2 KB · ⇊ 11 parts · ⤓ Micron 18.2 KB · ⤓ HTML 52.3 KB

top

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations.cite-ref-3[3] It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.cite-ref-4[4]

• Functionality

• Syntaxes

• Plugins

• History

• References

• External links

PostCSS is a framework to develop CSS tools.cite-ref-why-postcss-5-0[5] It can be used to develop a template language such as Sass and LESS.cite-ref-6[6]

The PostCSS core consists of:cite-ref-cssconfus-7-0[7]

• CSS parser that generates an abstract syntax tree

• Set of classes that comprises the tree

• CSS generator that generates a CSS line for the object tree

• Code map generator for the CSS changes made

Features are made available through plugins. The plugins are small programs working with the object tree. After the core has transformed a CSS string into an object tree, the plugins analyze and change the tree. Then PostCSS generates a new CSS string for the plugin-changed tree.

PostCSS and its plugins are written in JavaScript and distributed through npm, which offer APIs for low-level JavaScript operations.

There are official tools making it possible to use PostCSS with build systems such as Webpack,cite-ref-github-postcss-loader-8-0[8] Gulp,cite-ref-9[9] and Grunt.cite-ref-10[10] There is also a console interface available.cite-ref-11[11] Browserify or Webpack can be used to open PostCSS in a browser.cite-ref-12[12]

PostCSS allows changing the parser and generator. In this case, PostCSS could be used to work with the Lesscite-ref-github-postcss-less-13-0[13] and SCSScite-ref-github-postcss-scss-14-0[14] sources. However, PostCSS on its own cannot compile Sass or Less to CSS. What it does is change the original files — for instance, by sorting the CSS properties or checking the code for mistakes. PostCSS supports SugarSS.cite-ref-15[15]

PostCSS plugins perform different CSS processing tasks ranging from analysis and properties sorting to minification.

The complete plugin list can be found on postcss.parts, with some examples listed below.

• Autoprefixer to add and clear browser prefixes.cite-ref-16[16]

• CSS Modules to get CSS selectors isolated and code organized. It is supplied as part of Webpack.cite-ref-17[17]cite-ref-18[18]

• stylelint to analyze CSS code for mistakes and check style consistency.cite-ref-19[19]

• stylefmt fixes the CSS code according to the stylelint settings.cite-ref-20[20]

• PreCSS to perform some Sass/Less preprocessing functions.cite-ref-21[21]

• postcss-preset-env to emulate features from unfinished CSS specification drafts.cite-ref-22[22]

• cssnano to make CSS smaller in size by getting rid of the spaces and rewriting the code.cite-ref-23[23]

• RTLCSS to change CSS code so that the design should be suitable for right-to-left writing (such is applied in Arabic and Hebrew).cite-ref-24[24]

• postcss-assets, postcss-inline-svg and postcss-sprites to work with graphics.cite-ref-25[25]cite-ref-26[26]cite-ref-27[27]

During the course of the Rework project, the idea of modular CSS processing was suggested by TJ Holowaychuk September 1, 2012.cite-ref-28[28] February 28, 2013, TJ expressed it in public.cite-ref-29[29]

March 14, 2013, Andrey Sitnik's front-end work for Evil Martians resulted in Autoprefixer, a Rework-based plugin.cite-ref-30[30] Initially, the plugin name was rework-vendors.cite-ref-31[31]

As Autoprefixer grew, Rework could no longer to meet its needs.cite-ref-32[32] September 7, 2013,cite-ref-33[33] Andrey Sitnik started to develop PostCSS based on the Rework ideas.cite-ref-34[34]

In 3 months, the first PostCSS plugin, grunt-pixrem was released.cite-ref-35[35] December 22, 2013, Autoprefixer version 1.0 migrated to PostCSS.cite-ref-36[36]

For PostCSS, the primary style focus is alchemy.cite-ref-37[37] The project logo represents the philosopher's stone.cite-ref-38[38] Major and minor PostCSS versions get their names after the Ars Goetia demons.cite-ref-39[39] For instance, version 1.0.0 is called Marquis Decarabia.

The term postprocessor has caused some confusion.cite-ref-40[40] The PostCSS team used the term to show that PostCSS was not a template language (preprocessor) but a CSS tool. However, some developers think the term postprocessor would better suit browser tools (for instance, -prefix-free).cite-ref-trouble-future-specs-41-0[41] The situation has become even more complicated after the release of PreCSS. Now, instead of postprocessor, the PostCSS team use the term processor.cite-ref-42[42]

cite-note-wikidata-a6701b5cafdf9365c91b9e0a861922f6ff6d4436-v20-11. "Release 8.5.6". 16 June 2025. Retrieved 13 July 2025.

cite-note-22. "postcss/LICENSE at main · postcss/postcss". GitHub. 2013-09-24. Retrieved 2021-03-19.

cite-note-33. ↑ citerefbracey2015Bracey, Kezz (2015-09-23). "PostCSS Deep Dive: What You Need to Know". Envato Tuts+. Retrieved 2021-03-19.

cite-note-44. ↑ citerefsitnik2014Sitnik, Andrey (2014-12-13). "Add Evil Martians badge · postcss/postcss@513f9c1". GitHub. Retrieved 2021-03-19.

cite-note-why-postcss-55. ↑ citerefumaxmaxmaximussitnik2016uMaxmaxmaximus; Sitnik, Andrey (2016-08-04). "Why we need PostCSS if we have Webpack o_O? · Issue #861 · postcss/postcss". GitHub. Retrieved 2021-03-19.

cite-note-66. ↑ citerefbracey2015Bracey, Kezz (2015-10-21). "PostCSS Deep Dive: Preprocessing with "PreCSS"". GitHub. Retrieved 2021-03-19.

cite-note-cssconfus-77. ↑ citerefsitnik2015Sitnik, Andrey (2015-06-24). Andrey Sitnik - PostCSS: The Future After Sass and LESS - YouTube. YouTube (Videotape). BocoupLLC. Retrieved 2021-03-19.

cite-note-github-postcss-loader-88. ↑ citerefwebpack-contrib2014webpack-contrib (2014-10-03). "webpack-contrib/postcss-loader: PostCSS loader for webpack". GitHub. Retrieved 2021-03-19.

cite-note-99. ↑ citerefkuzmin2014Kuzmin, Andrey (2014-08-17). "postcss/gulp-postcss: Pipe CSS through PostCSS processors with a single parse". GitHub. Retrieved 2021-03-19.

cite-note-1010. ↑ citerefnikitenko2014Nikitenko, Dmitry (2014-09-25). "nDmitry/grunt-postcss: Apply several post-processors to your CSS using PostCSS". GitHub. Retrieved 2021-03-19.

cite-note-1111. ↑ citerefkrzeminskizimmermanciniawsky2015Krzeminski, Damian; Zimmerman, Ryan; Ciniawsky, Michael (2015-03-11). "postcss/postcss-cli: CLI for postcss". GitHub. Retrieved 2021-03-19.

cite-note-1212. ↑ citerefniemel-2016Niemelä, Matias (2016-09-23). "Running postcss in the browser · Issue #830 · postcss/postcss". GitHub. Retrieved 2021-03-19.

cite-note-github-postcss-less-1313. ↑ citerefpowell2016Powell, Andrew (2016-01-26). "shellscape/postcss-less: PostCSS Syntax for parsing LESS". GitHub. Retrieved 2021-03-19.

cite-note-github-postcss-scss-1414. ↑ citerefsitnik2015Sitnik, Andrew (2015-08-09). "postcss/postcss-scss: SCSS parser for PostCSS". GitHub. Retrieved 2021-03-19.

cite-note-1515. ↑ citerefsitnik2016Sitnik, Andrew (2016-01-04). "postcss/sugarss: Indent-based CSS syntax for PostCSS". GitHub. Retrieved 2021-03-20.

cite-note-1616. ↑ "postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use". GitHub. Retrieved 2021-03-19.

cite-note-1717. ↑ "css-modules/css-modules: Documentation about css-modules". GitHub. Retrieved 2021-03-19.

cite-note-1818. ↑ "css-loader/package.json at 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib/css-loader". GitHub. 2016-08-15. Retrieved 2021-03-19.

cite-note-1919. ↑ "stylelint/stylelint". GitHub. Retrieved 2021-03-19.

cite-note-2020. ↑ "morishitter/stylefmt: stylefmt is a tool that automatically formats stylesheets". GitHub. Retrieved 2021-03-19.

cite-note-2121. ↑ "jonathantneal/precss: Use Sass-like markup in your CSS". GitHub. Retrieved 2021-03-19.

cite-note-2222. ↑ "csstools/postcss-preset-env: Convert modern CSS into something browsers understand". GitHub. Retrieved 2021-03-19.

cite-note-2323. ↑ "cssnano/cssnano: A modular minifier, built on top of the PostCSS ecosystem". GitHub. Retrieved 2021-03-19.

cite-note-2424. ↑ "MohammadYounes/rtlcss: Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)". GitHub. Retrieved 2021-03-19.

cite-note-2525. ↑ "borodean/postcss-assets: An asset manager for PostCSS". GitHub. Retrieved 2021-03-19.

cite-note-2626. ↑ "TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax". GitHub. Retrieved 2021-03-19.

cite-note-2727. ↑ "2createStudio/postcss-sprites: Generate sprites from stylesheets". GitHub. Retrieved 2021-03-19.

cite-note-2828. ↑ citerefholowaychuk2012Holowaychuk, TJ (2012-09-01). "Initial commit · reworkcss/rework@0a7be25". GitHub. Retrieved 2019-07-21.

cite-note-2929. ↑ citerefholowaychuk2013Holowaychuk, TJ (2013-02-28). "Modular CSS preprocessing with rework - TJ Holowaychuk". Tumblr. Archived from the original on 2014-09-18. Retrieved 2014-09-18.

cite-note-3030. ↑ citerefsitnik2013Sitnik, Andrey (2013-03-14). "Initial commit · postcss/autoprefixer@d36346e". GitHub. Retrieved 2019-07-21.

cite-note-3131. ↑ citerefsitnik2013Sitnik, Andrey (2013-03-28). "Rename project to autoprefixer · postcss/autoprefixer@419a77d". GitHub. Retrieved 2019-07-21.

cite-note-3232. ↑ citerefgallagher2014Gallagher, Nicolas (2014-06-04). "Facilitate autoprefixer needs · Issue #20 · reworkcss/css". GitHub. Retrieved 2019-07-21.

cite-note-3333. ↑ citerefsitnik2013Sitnik, Andrey (2013-09-07). "Init project · postcss/postcss@2d96cea". GitHub. Retrieved 2019-07-21.

cite-note-3434. ↑ citerefsitnik2015Sitnik, Andrey (2015-09-07). "PostCSS Second Birthday — Martian Chronicles, Evil Martians' team blog". Martian Chronicles, Evil Martians’ team blog. Retrieved 2019-07-21.

cite-note-3535. ↑ citerefrob2013Rob, Wierzbowski (2013-12-14). "Initial commit · robwierzbowski/grunt-pixrem@0f7b662". GitHub. Retrieved 2019-07-21.

cite-note-3636. ↑ [citerefsitnik2013Sitnik, Andrey (2013-12-21). "Release 1.0 "Plus ultra" · postcss/autoprefixer". GitHub. Retrieved 2019-07-20.

cite-note-3737. ↑ citereftis-ter2015Tisäter, Marcus (2015-12-31). "Mockup · Issue #4 · postcss/postcss.org". GitHub. Retrieved 2019-07-21.

cite-note-3838. ↑ citerefpostcss2015@PostCSS (2015-08-14). "PostCSS logo is a alchemy sign of philosopher's stone, which can transform metals to gold" (Tweet) – via Twitter.

cite-note-3939. ↑ citerefautoprefixer2013@Autoprefixer (2013-12-17). "Every PostCSS version code name is taken from demons list in alchemy book "Lemegeton Clavicula Salomonis"" (Tweet) – via Twitter.

cite-note-4040. ↑ citerefmarohni-2014Marohnić, Matija (2014-09-07). "CSS pre- vs. post-processing | Silvenon's Blog". Silvenon's Blog. Archived from the original on 2017-11-09. Retrieved 2017-11-09.

cite-note-trouble-future-specs-4141. ↑ The Trouble With Preprocessing Based on Future Specs

cite-note-4242. ↑ citerefpostcss2015@PostCSS (2015-07-28). "It is time admit my mistakes. "Postprocessor" term was bad. PostCSS team stopped to use it" (Tweet) – via Twitter.

• Official website